<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>axios</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #06164A;
    }

    .left {
        width: 70%;
    }

    .left>div {
        height: 500px;
        /* border: 1px solid #fff; */
    }
</style>

<body>
    <div id='app'>
        <section class="left">
            <div id='chart1'></div>
        </section>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    city: []
                }
            },
            created() {
                this.getData()

            },
            methods: {
                getData() {
                    //请求百度首页
                    axios.get('https://www.huodongjia.com/base_menu/')
                       .then(res => {
                            //请求成功
                            console.log('请求成功')
                            console.log(res)
                            this.city = res.data.city
                            this.city.shift()
                            this.chart1()
                        })
                       .catch(err => {
                            //请求失败
                            console.log('请求失败' + err)
                        })
                       .finally(() => {
                            console.log('请求完成')
                        })
                },
                chart1() {
                    var xdata = [],
                        ydata1 = []
                    this.city.forEach(item => {
                        xdata.push(item.district_name)
                        ydata1.push(item.district_id)
                    })
                    console.log(xdata); // 打印 xdata 数组，用于调试
                    var chartDom = document.getElementById('chart1');
                    var myChart = echarts.init(chartDom, 'dark');
                    var option;
                    option = {
                        backgroundColor: '#06164A',
                        title: { //标题
                            text: '城市分布',
                            left: 'center',
                            top: '10px'
                        },
                        tooltip: { //提示框
                            show: true,
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: xdata,
                            axisLabel: {
                                show: true, // 确保标签显示
                                color: '#fff' // 设置标签颜色为白色
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: true
                            }
                        },
                        series: [{
                            data: ydata1,
                            type: 'bar',
                            barWidth: '40%',
                            itemStyle: {
                                borderRadius: 6
                            }
                        }]
                    };
                    option && myChart.setOption(option);
                    window.addEventListener('resize', () => {
                        myChart.resize()
                    })
                },

            }
        }).mount('#app')
    </script>
</body>

</html>